<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="utf-8">
    <title>用户添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="../../layuiadmin/layui/css/layui.css" media="all" rel="stylesheet"
          th:href="@{/layuiadmin/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/layui-form-extend.css}">
</head>
<body>
<div style="padding: 50px;">
    <form id="lay-form" class="layui-form" lay-filter="lay-form" th:action="@{/system/user/edit/{userId}(userId=${user.id})}" th:method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="loginName" class="layui-form-label lay-required">登录名：</label>
                <div class="layui-input-inline">
                    <input type="text" th:id="loginName" name="loginName" id="loginName" class="layui-input lay-required" lay-verify="required"
                           placeholder="请输入登录名"
                           autocomplete="off" th:value="${user.loginName}">

                </div>
                <!--<div class="layui-form-mid layui-word-aux" >
                  <span style="color: red">*</span>
                </div>-->

            </div>
            <div class="layui-inline">
                <label for="userName" class="layui-form-label lay-required required">单位名称：</label>
                <div class="layui-input-inline">
                    <input type="text" id="userName" name="userName" class="layui-input lay-required" lay-verify="required"
                           placeholder="请输入单位名称"
                           autocomplete="off" th:value="${user.userName}">
                </div>
            </div>
<!--            <div class="layui-inline">-->
<!--                <label class="layui-form-label lay-required">密码：</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="password" name="userPassword" class="layui-input" lay-verify="required"-->
<!--                           placeholder="请输入密码">-->
<!--                </div>-->
<!--            </div>-->
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="contractPerson" class="layui-form-label">联系人：</label>
                <div class="layui-input-inline">
                    <input type="text" id="contractPerson" name="contractPerson" class="layui-input" th:value="${user.contractPerson}">
                </div>
            </div>

            <div class="layui-inline">
                <label for="userOfficeTel" class="layui-form-label">办公电话：</label>
                <div class="layui-input-inline">
                    <input type="text" id="userOfficeTel" name="userOfficeTel" class="layui-input" th:value="${user.userOfficeTel}">
                </div>
            </div>

            <div class="layui-inline">
                <label for="userPhone" class="layui-form-label">手机：</label>
                <div class="layui-input-inline">
                    <input type="text" id="userPhone" name="userPhone" class="layui-input" th:value="${user.userPhone}" >
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label lay-required">用户类型：</label>
            <div class="layui-input-block">
                <input type="radio" name="userType" title="所属单位" value="1"
                       th:attr="checked=${user.userType == 1}">
                <input type="radio" name="userType" title="集团部门"
                       th:attr="checked=${user.userType == 2}" value="2">
                <input type="radio" name="userType" title="集团人力资源部"
                       th:attr="checked=${user.userType == 3}" value="3">
                <input type="radio" name="userType" title="主管领导"
                       th:attr="checked=${user.userType == 4}" value="4">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="dictKhflValue" class="layui-form-label lay-required">考核分类：</label>
            <div class="layui-input-block lay-required">
<!--                <input type="checkbox" id="dictKhflValue" name="dictKhflValue" lay-verify="checkedKhfl"-->
<!--                       th:each="kh:${khfl}"-->
<!--                       th:value="${kh.dictValue}"-->
<!--                       th:title="${kh.dictName}"-->
<!--                       th:attr="checked=${#lists.isEmpty(hasDictKhflValue) ? false : #lists.contains(hasDictKhflValue,kh.dictValue)} " >-->
                <input type="checkbox" id="dictKhflValue" name="dictKhflValue"
                       th:each="kh:${khfl}"
                       th:value="${kh.dictValue}"
                       th:title="${kh.dictName}"
                       th:attr="checked=${#lists.isEmpty(hasDictKhflValue) ? false : #lists.contains(hasDictKhflValue,kh.dictValue)} " >
                       <!--th:attr="checked=${#lists.isEmpty(user.getHasKhfl()) ? false : #lists.contains(user.getHasKhfl(),kh.dictValue) }" >-->
<!--                       th:attr="checked=${#lists.contains(user.getKhfl(),kh)}" >-->
            </div>
        </div>

        <div class="layui-form-item">
            <label for="dictGqflValue" class="layui-form-label lay-required">股权分类：</label>
            <div class="layui-input-block">
<!--                <input type="radio" id="dictGqflValue" name="dictGqflValue" lay-verify="checkedGqfl"-->
<!--                       th:each="gq:${gqfl}"-->
<!--                       th:value="${gq.id}"-->
<!--                       th:title="${gq.dictName}"-->
<!--                       th:attr="checked=${gq.dictValue eq user.getDictGqflValue()}">-->
                <input type="radio" id="dictGqflValue" name="dictGqflValue"
                       th:each="gq:${gqfl}"
                       th:value="${gq.id}"
                       th:title="${gq.dictName}"
                       th:attr="checked=${gq.dictValue eq user.getDictGqflValue()}">
                <!--<input type="checkbox" name="userCtg" title="全资企业">
                <input type="checkbox" name="userCtg" title="控股企业">
                <input type="checkbox" name="userCtg" title="参股企业">-->
            </div>
        </div>

        <div class="layui-form-item">
            <label for="roles" class="layui-form-label lay-required">角色：</label>
            <div class="layui-input-block">
<!--                <input type="checkbox" id="roles" name="roles" lay-verify="checkedRoles"-->
<!--                       th:each="role:${roles}"-->
<!--                       th:value="${role.id}"-->
<!--                       th:title="${role.roleName}"-->
<!--                       th:checked="${#lists.contains(user.getHasRoleIds(),role.getId())}">-->
                <input type="checkbox" id="roles" name="roles" lay-verify="checkedRoles"
                       th:each="role:${roles}"
                       th:value="${role.id}"
                       th:title="${role.roleName}"
                       th:checked="${#lists.isEmpty(user.getHasRoleIds()) ? false : #lists.contains(user.getHasRoleIds(),role.getId())}">
                       <!--th:attr="checked=${user.hasRoleIds == null ? false : #lists.contains(user.hasRoleIds,role.id)}"-->
            </div>
        </div>

        <div class="layui-form-item">
            <label for="remark" class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" class="layui-textarea"></textarea>
            </div>

        </div>

        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="lay-submit" id="lay-submit" value="确认">
        </div>

        <div class="layui-form-item layui-hide">
            <input type="hidden" name="userId" th:value="${user.id}">
        </div>
    </form>
</div>

<script th:src="@{/layuiadmin/layui/layui.js}" src="../../layuiadmin/layui/layui.js"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.form.js}"></script>



<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload'], function () {
        var $ = layui.$
            , form = layui.form;


        form.on('radio(userType)',function(data){
            // var verifyArray = form.verify().config.verify;
            // console.log(verifyArray);
            if(data.value !== 1){

                delete form.verify().config.verify.checkedKhfl;
                delete form.verify().config.verify.checkedGqfl;
                $('#lblKhfl').removeClass('lay-required');
                $('#lblGqfl').removeClass('lay-required');

            }else {
                //console.log('222222222222222222');
                $("#lblKhfl").addClass('lay-required');
                $('#lblGqfl').addClass('lay-required');
                form.verify().config.verify['dictKhflValue'] = function (value, item) {
                    var checkedKhfl = $('input:checkbox[name="dictKhflValue"]:checked').val();
                    if (checkedKhfl === undefined) {
                        return '请选择考核分类';
                    }
                };
                form.verify().config.verify['checkedGqfl'] = function (value, item) {
                    var gqflChecked = $('input:radio[name="dictGqflValue"]:checked').val();
                    if (gqflChecked === undefined) {
                        return '请选择股权分类';
                    }
                };

            }
            form.render();
            //console.log(form.verify().config.verify);
        });

        //自定义验证
        form.verify({
            checkedKhfl:function(value,item){
                var checkedKhfl = $('input:checkbox[name="dictKhflValue"]:checked').val();
                if(checkedKhfl === undefined){
                    return '请选择考核分类';
                }
            },
            checkedGqfl:function(value,item){
                var gqflChecked = $('input:radio[name="dictGqflValue"]:checked').val();
                if(gqflChecked === undefined){
                    return '请选择股权分类';
                }
            },
            checkedRoles:function(value,item){
                var checkedRoles = $('input:checkbox[name="roles"]:checked').val();
                console.log(";value" + value + ";item:" + JSON.stringify(item));
                if(checkedRoles === undefined){
                    return '请至少选择一个角色';
                }
            }
        });

        form.render();
    })
</script>
</body>
</html>